<template>
  <div v-show="showTable" class="big_box">
    <div class="b_box">
      <div class="header_a">
        <span>状态</span><span>房型</span>
        <el-button type="primary" link style="margin-left: 740px;" @click="showTableHandler">添加房型</el-button>
      </div>
      <div class="body_a">
        <div v-for="item in roomData" :key="item.number">
          <div
            :class="{ box_s: item.zt == '空闲中', box_t: item.zt == '预定中', box_r: item.zt == '维修中', box_x: item.zt == '清洁中', box_y: item.zt == '入住中' }"
            v-if="item.louceng == prev.innerText[0]">
            <div class="zs">{{ item.number }}</div>
            <div class="ys">{{ item.r_kind }}</div>
            <div class="zx">{{ item.zt }}</div>
            <template v-if="item.zt == '空闲中'">
              <div class="yx">￥{{ item.data }}</div>
            </template>
            <template v-if="item.zt == '预定中'">
              <div class="yx">日期：{{ item.data }}</div>
            </template>
            <template v-if="item.zt == '维修中' || item.zt == '清洁中'">
              <div class="yx"></div>
            </template>
            <template v-if="item.zt == '入住中'">
              <div class="yx">剩余时间{{ item.data }}</div>
            </template>
          </div>
        </div>
      </div>
    </div>
    <div class="louceng">
      <div class="text">楼层</div>
      <ul class="num_louceng" @click="clickHandler" ref="ul">
        <li v-for="i in 4" :key="i">{{ i }}F</li>
      </ul>
    </div>
  </div>

  <div class="addHouse" v-show="!showTable">
    <el-form :model="houseForm" label-width="300px" ref="houseForm" :rules="rules">
      <div class="title">基本信息</div>
      <el-divider></el-divider>
      <el-form-item label="房型名称：" prop="r_name">
        <el-input v-model="houseForm.r_name" style="width: 600px;"/>
      </el-form-item>
      <el-form-item label="售价：" prop="price">
        <el-input v-model="houseForm.price" style="width: 600px;" />
      </el-form-item>
      <el-form-item label="房型面积：" prop="area">
        <el-input v-model="houseForm.area" style="width: 600px;" />
      </el-form-item>
      <el-form-item label="可住人数：" prop="people">
        <el-input v-model="houseForm.people" style="width: 600px;" />
      </el-form-item>
      <div class="title">展示信息</div>
      <el-divider></el-divider>
      <el-form-item label="房型图片：" prop="pic">
        <el-upload class="avatar-uploader" action="http://localhost:5173/hotel/photo" :show-file-list="false"
          :on-success="handleAvatarSuccess" @change="changeUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="房型介绍：" prop="jieshao">
        <el-input v-model="houseForm.jieshao" :rows="3" type="textarea" style="width: 400px;" />
      </el-form-item>
      <el-form-item label="房型标签：" prop="tags">
        <el-tag :key="tag" v-for="tag in houseForm.tags" closable :disable-transitions="false" @close="handleClose(tag)">
          {{ tag }}
        </el-tag>
        <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
          @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
      </el-form-item>
      <el-form-item label="是否加床：">
        <el-radio-group v-model="houseForm.jiachuang" class="ml-4">
          <el-radio label='1'>不可加床</el-radio>
          <el-radio label='2'>免费加床</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否含早：">
        <el-radio-group v-model="houseForm.hanzao" class="ml-4">
          <el-radio label='1'>不含早</el-radio>
          <el-radio label='2'>含早</el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="title">配套服务</div>
      <peitaofwDialog v-model="dialogVisible" :dialogVisible="dialogVisible" @dialogCancel="dialogCancelHandler"
      @dialogOk="dialogOKHandler" />
      <el-divider></el-divider>
      <el-button color="#7399EB" plain style="width: 200px; margin-left: 220px;margin-bottom: 70px;" @click="addfwHandler">添加配套服务</el-button>
      <querenQuxiao @okHandler="submitHandler" @cancelHandler="cancelHandler"></querenQuxiao>
    </el-form>
  </div>
</template>
  
<script>
import { ElMessage } from 'element-plus'
import querenQuxiao from '../../components/queren_quxiao.vue'
import { getRoomsKind, addHouseApi } from '../../api/roomApi'
import peitaofwDialog from '../../components/peitaofwDialog.vue'
export default {
  components: {
    querenQuxiao,peitaofwDialog
  },
  async created() {
    await this.getData()
  },
  mounted() {
    this.prev = this.$refs.ul.children[0]
  },
  data() {
    return {
      roomData: [],
      prev: '',
      lc: '',
      showTable: true,
      dialogVisible: false,
      houseForm: {
        r_name: '',
        price: null,
        area: null,
        people: null,
        pic: '',
        jieshao: '',
        tags: ['官方直销', '今日特惠'],
        jiachuang: '2',
        hanzao: '2',
        peitaofw: []
      },
      rules: {
        r_name: [
          {
            required: true,
            message: '请输入房型名称',
            trigger: 'blur'
          },
          {
            pattern: /^[\u4E00-\u9FA5]+$/,
            message: '请输入中文房型名称',
            trigger: 'blur'
          }
        ],
        price: [
          {
            required: true,
            message: '请输入售价',
            trigger: 'blur'
          },
          {
            pattern: /^\d+$/,
            message: '请输入数值型售价',
            trigger: 'blur'
          }
        ],
        area: [
          {
            required: true,
            message: '请输入房型面积',
            trigger: 'blur'
          },
          {
            pattern: /^\d+$/,
            message: '请输入数值型面积',
            trigger: 'blur'
          }
        ],
        people: [
          {
            required: true,
            message: '请输入可住人数',
            trigger: 'blur'
          },
          {
            pattern: /^\d+$/,
            message: '请输入数字',
            trigger: 'blur'
          },
          {
            validator: async (rule, value, callback) => { 
                if (0<value && value <10) {
                  callback();
                } else {
                  callback(new Error('不得超过10人呦'));
                }
            },
            trigger: 'blur',
          }
        ],
        pic: [
          {
            required: true,
            message: '请上传房型图片',
            trigger: 'blur'
          }],
        jieshao: [
          {
            required: true,
            message: '请输入房型介绍',
            trigger: 'blur'
          }],
        tags: [
          {
            required: true,
            message: '请添加房型标签',
            trigger: 'blur'
          }],
      },
      inputVisible: false,
      inputValue: '',
      imageUrl: ''
    }
  },
  methods: {
    async getData() {
      let ret = await getRoomsKind()
      this.roomData = ret.results
    },
    clickHandler($evt) {
      Array.from(this.$refs.ul.children).forEach(item => {
        if (item == $evt.target) {
          this.prev = item
        }
      })
    },
    handleClose(tag) {
      this.houseForm.tags.splice(this.houseForm.tags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    showTableHandler(){
      this.showTable = false
      this.imageUrl=''
      this.houseForm={
        r_name: '',
        price: null,
        area: null,
        people: null,
        pic: '',
        jieshao: '',
        tags: ['官方直销', '今日特惠'],
        jiachuang: '2',
        hanzao: '2',
        peitaofw: []
      }
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.houseForm.tags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    submitHandler() {
      this.$refs.houseForm.validate(async (allRight) => {
        if (allRight) {
          let res = await addHouseApi(this.houseForm)
          if (res.ok == 1) {
            this.showTable=true
            ElMessage({
              type: 'success',
              message: '保存成功'
            })
          } else {
            ElMessage({
              type: 'error',
              message: '保存失败'
            })
          }
        }
      })
    },
    cancelHandler() {
      this.showTable = true
    },
    changeUpload(file) {
      if (file.response) {
        this.houseForm.pic = file.response.data.path
      }
    },
    addfwHandler(){
      this.dialogVisible = true;
    },
    dialogOKHandler({arr}){
      this.dialogVisible = false;
      this.houseForm.peitaofw=[...arr]
    },
    dialogCancelHandler(){
      this.dialogVisible = false;
    }
  },
  watch: {
    prev() {
      Array.from(this.$refs.ul.children).forEach(item =>
        item == this.prev ? item.style.background = '#C9DAFF' :
          item.style.background = 'transparent'
      )
    }
  }
}
</script>
  
<style lang="scss" scoped>
.header_a {
  height: 50px;
  width: 100%;
  border-bottom: 1px solid black;

  span {
    display: inline-block;
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
}

.big_box {
  width: 100%;
  height: 89%;
}

.b_box {
  width: 1075px;
  background: #FFFFFF;
  border-radius: 3px;
  float: left;
}

.louceng {
  width: 50px;
  height: 400px;
  background-color: #FFF;
  margin-left: 40px;
  float: left;

  .text {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }

  ul {
    margin: 0;
    padding: 0;

    li {
      width: 50px;
      height: 50px;
      border-radius: 6px;
      line-height: 50px;
      text-align: center;
    }
  }

}

.body_a {
  padding: 20px 15px;
  width: 1000px;
  display: flex;
  flex-wrap: wrap;

  .box_s {
    width: 150px;
    height: 90px;
    background: #8EAFFA;
    border-radius: 3px;
    margin: 25px;
    color: #FFF;
  }

  .box_t {
    width: 144px;
    height: 84px;
    background: #FFF;
    border-radius: 3px;
    margin: 25px;
    color: #8EAFFA;
    border: 3px solid #8EAFFA;
  }

  .box_r {
    width: 150px;
    height: 90px;
    background: rgba(255, 195, 135, 0.61);
    ;
    border-radius: 3px;
    margin: 25px;
    color: #A39B93;
    ;
  }

  .box_x {
    width: 150px;
    height: 90px;
    background: #8ADE8E;
    border-radius: 3px;
    margin: 25px;
    color: #FFF;
  }

  .box_y {
    width: 144px;
    height: 84px;
    background: #FFF;
    border-radius: 3px;
    margin: 25px;
    color: #F08F2E;
    border: 3px solid #FFC387;
  }

  .zs {
    width: 65px;
    height: 27px;
    float: left;
    padding: 5px;
  }

  .ys {
    width: 59px;
    height: 35px;
    float: left;
    padding: 5px;
    text-align: right;
  }

  .zx {
    width: 44px;
    height: 35px;
    float: left;
    padding: 5px;
    padding-right: 0;
    line-height: 48px;
    font-size: 14px;
  }

  .yx {
    width: 90px;
    height: 35px;
    float: left;
    text-align: right;
    line-height: 58px;
    font-size: 13px;
  }
}

.addHouse {
  width: inherit;
  background-color: #FFF;
  padding-bottom: 60px;

  .title {
    width: 180px;
    height: 21px;
    line-height: 46px;
    text-align: center;
    font-weight: 600;
  }
}


.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>